<template>
  <a-layout style="min-height: 100vh">
    <!-- :trigger="null" -->
    <a-layout-sider v-model="collapsed" collapsible>
      <div class="logo">
        <a-avatar :size="60" :src="logo" />
      </div>
      <!-- 菜单栏 -->
      <a-menu
        theme="dark"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
      >
        <a-sub-menu v-for="item in menuList" :key="item.key">
          <template #title>
            <span>
              <span class="anticon">
                <span :class="['iconfont', item.icon]"></span>
              </span>
              <span>{{ item.val }}</span>
            </span>
          </template>
          <a-menu-item
            v-for="itemCh in item.ch"
            :key="itemCh.key"
            @click="routerGo(itemCh.router)"
          >
            {{ itemCh.val }}</a-menu-item
          >
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- 头部 -->
      <a-layout-header style="background: #fff; padding: 0;">
        <span>
          <i class="iconfont iconelectronics"></i>
          <span>{{ time }}</span>
        </span>
        <a-dropdown>
          <a class="ant-dropdown-link">
            <span style="margin-right: 10px;color: #000000;"
              >OzawaMuSorrowSound</span
            >
            <a-avatar :src="logo" size="32"></a-avatar>
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item
                @click="hMenu(item)"
                v-for="item in hList"
                :key="item.id"
                >{{ item.val }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>
      <!-- 身体 -->
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item v-if="router.currentRoute.value.name">{{
            router.currentRoute.value.name
          }}</a-breadcrumb-item>
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
        >
          <router-view></router-view>
        </div>
      </a-layout-content>
      <!-- 底部 -->
      <a-layout-footer style="text-align: center">
        Ant Design ©2021 Created by
        <a href="https://www.cnblogs.com/1748sb/">小泽沐忧声</a>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import { toRefs, reactive, onMounted, createVNode, watch } from "vue";
import menuList from "@/utils/data/index.js";
import { message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { timestampToTime } from "@/utils/index.js";
import { Modal } from "ant-design-vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let data = reactive({
      collapsed: false,
      selectedKeys: "",
      openKeys: "",
      logo: require("@/assets/logo.png"),
      time: "",
      hList: [
        {
          val: "修改资料",
          id: 1
        },
        {
          val: "退出登录",
          id: 2
        }
      ],
      menuList,
      router: useRouter().currentRoute.value.name
    });
    let router = useRouter();
    let methods = {
      hMenu(options) {
        s;
        if (options.id == 2) {
          Modal.confirm({
            title: "提示",
            icon: createVNode(ExclamationCircleOutlined),
            content: "确定要退出吗？",
            okText: "确认",
            cancelText: "取消",
            onOk: () => {
              localStorage.clear();
              location.reload();
            }
          });
        } else {
          message.success(options.val);
        }
      },
      getTime() {
        data.selectedKeys = localStorage.getItem("selectedKeys") || "";
        data.openKeys = JSON.parse(localStorage.getItem("openKeys")) || "";
        data.time = timestampToTime(new Date().getTime());
        setInterval(() => {
          data.time = timestampToTime(new Date().getTime());
        }, 1000);
      },
      routerGo(str) {
        router.push(str);
      }
    };
    onMounted(() => {
      // 时间
      methods.getTime();
    });
    watch(
      () => data.selectedKeys,
      res => {
        localStorage.setItem("selectedKeys", res);
      }
    );
    watch(
      () => data.openKeys,
      res => {
        localStorage.setItem("openKeys", JSON.stringify(res));
      }
    );
    return {
      ...toRefs(data),
      ...methods,
      router
    };
  }
};
</script>
<style lang="scss" scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}

.logo {
  text-align: center;
  margin: 20px 0;
}

.iconelectronics {
  margin: 0 16px;
}

.ant-dropdown-link {
  float: right;
  margin-right: 16px;
}
</style>
